.transf > div {
    cursor: default;
    position: relative;
    display:inline-block;
    *zoom:1;
    *display:inline;
    margin: 10px;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 11px;
    line-height: 80px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.transf > div:hover {
    z-index: 99;
}

.transf span{
    display: block;
    line-height: normal;
}
.transf span:first-child {
    margin-top: 22px;
}

.transf-origin >div:hover {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.origin-1 {
    -webkit-transform-origin: 20% 50%;
    -moz-transform-origin: 20% 50%;
    -ms-transform-origin: 20% 50%;
    -o-transform-origin: 20% 50%;
    transform-origin: 20% 50%;
}

.origin-2 {
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.origin-3 {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}

.origin-4 {
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

.origin-5 {
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.origin-6 {
    -webkit-transform-origin: 70% 70%;
    -moz-transform-origin: 70% 70%;
    -ms-transform-origin: 70% 70%;
    -o-transform-origin: 70% 70%;
    transform-origin: 70% 70%;
}

.rotate-1:hover {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

.rotate-2:hover {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.rotate-3:hover {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-4:hover {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
}

.rotate-5:hover {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    transform: rotate(-120deg);
}

.rotate-6:hover {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.scale-1:hover {
    -webkit-transform: scale(.5,.8);
    -moz-transform: scale(.5,.8);
    -ms-transform: scale(.5,.8);
    -o-transform: scale(.5,.8);
    transform: scale(.5,.8);
}

.scale-2:hover {
    -webkit-transform: scale(1.5,2);
    -moz-transform: scale(1.5,2);
    -ms-transform: scale(1.5,2);
    -o-transform: scale(1.5,2);
    transform: scale(1.5,2);
}

.scale-3:hover {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
    -ms-transform: scaleX(2);
    -o-transform: scaleX(2);
    transform: scaleX(2);
}

.scale-4:hover {
    -webkit-transform: scaleY(.8);
    -moz-transform: scaleY(.8);
    -ms-transform: scaleY(.8);
    -o-transform: scaleY(.8);
    transform: scaleY(.8);
}

.scale-5:hover {
    -webkit-transform: scale(-.8,1.2);
    -moz-transform: scale(-.8,1.2);
    -ms-transform: scale(-.8,1.2);
    -o-transform: scale(-.8,1.2);
    transform: scale(-.8,1.2);
}

.scale-6:hover {
    -webkit-transform: scale(1.5,-1.5);
    -moz-transform: scale(1.5,-1.5);
    -ms-transform: scale(1.5,-1.5);
    -o-transform: scale(1.5,-1.5);
    transform: scale(1.5,-1.5);
}

.skew-1:hover {
    -webkit-transform: skew(10deg,30deg);
    -moz-transform: skew(10deg,30deg);
    -ms-transform: skew(10deg,30deg);
    -o-transform: skew(10deg,30deg);
    transform: skew(10deg,30deg);
}

.skew-2:hover {
    -webkit-transform: skew(30deg,10deg);
    -moz-transform: skew(30deg,10deg);
    -ms-transform: skew(30deg,10deg);
    -o-transform: skew(30deg,10deg);
    transform: skew(30deg,10deg);
}

.skew-3:hover {
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    -ms-transform: skewX(45deg);
    -o-transform: skewX(45deg);
    transform: skewX(45deg);
}

.skew-4:hover {
    -webkit-transform: skewY(-45deg);
    -moz-transform: skewY(-45deg);
    -ms-transform: skewY(-45deg);
    -o-transform: skewY(-45deg);
    transform: skewY(-45deg);
}

.skew-5:hover {
    -webkit-transform: skew(-30deg,10deg);
    -moz-transform: skew(-30deg,10deg);
    -ms-transform: skew(-30deg,10deg);
    -o-transform: skew(-30deg,10deg);
    transform: skew(-30deg,10deg);
}

.skew-6:hover {
    -webkit-transform: skew(30deg,-10deg);
    -moz-transform: skew(30deg,-10deg);
    -ms-transform: skew(30deg,-10deg);
    -o-transform: skew(30deg,-10deg);
    transform: skew(30deg,-10deg);
}

.translate-1:hover {
    -webkit-transform: translate(10px,30px);
    -moz-transform: translate(10px,30px);
    -ms-transform: translate(10px,30px);
    -o-transform: translate(10px,30px);
    transform: translate(10px,30px);
}

.translate-2:hover {
    -webkit-transform: translate(30px,10px);
    -moz-transform: translate(30px,10px);
    -ms-transform: translate(30px,10px);
    -o-transform: translate(30px,10px);
    transform: translate(30px,10px);
}

.translate-3:hover {
    -webkit-transform: translateX(45px);
    -moz-transform: translateX(45px);
    -ms-transform: translateX(45px);
    -o-transform: translateX(45px);
    transform: translateX(45px);
}

.translate-4:hover {
    -webkit-transform: translateY(-45px);
    -moz-transform: translateY(-45px);
    -ms-transform: translateY(-45px);
    -o-transform: translateY(-45px);
    transform: translateY(-45px);
}

.translate-5:hover {
    -webkit-transform: translate(-30px,10px);
    -moz-transform: translate(-30px,10px);
    -ms-transform: translate(-30px,10px);
    -o-transform: translate(-30px,10px);
    transform: translate(-30px,10px);
}

.translate-6:hover {
    -webkit-transform: translate(30px,-10px);
    -moz-transform: translate(30px,-10px);
    -ms-transform: translate(30px,-10px);
    -o-transform: translate(30px,-10px);
    transform: translate(30px,-10px);
}

/*.matrix{*/
    /*-webkit-transform: matrix(1, 0, 0, 1, 30, 30);*/
    /*-moz-transform: matrix(1, 0, 0, 1, 30, 30);*/
    /*-ms-transform: matrix(1, 0, 0, 1, 30, 30);*/
    /*-o-transform: matrix(1, 0, 0, 1, 30, 30);*/
    /*transform: matrix(1, 0, 0, 1, 30, 30);*/
/*}*/